// 导入用来创建路由和确定路由模式的两个方法
import store from "@/store";
import component from "element-plus/es/components/tree-select/src/tree-select-option.mjs";
import { createRouter, createWebHistory } from "vue-router";

/**
 * 定义路由信息
 *
 */
const routes = [
  {
    path: "/login",
    name: "login",
    component: () => import("@/components/login/index.vue"),
    meta: { title: "登录页" },
  },
  {
    name: "main",
    alias: "/",
    path: "/main",
    component: () => import("@/components/main/index.vue"),
    children: [
      {
        name: "user",
        path: "/user",
        component: () => import("@/components/system/user/index.vue"),
      },
    ],
    meta: { title: "主页" },
  },
];

// 创建路由实例并传递 `routes` 配置
// 我们在这里使用 html5 的路由模式，url中不带有#，部署项目的时候需要注意。
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 全局的路由守卫，会在每次路由跳转的时候执行
router.beforeEach((to, from, next) => {
  console.log(`'${from.fullPath}'`, "to", `'${to.fullPath}'`);
  document.title = to.meta.title || document.title;
  // 每次进行路由切换都判断一下有没有登录
  // 如果没有登录就跳转到登录页面
  if (to.path == "/login") {
    if (store.getters.IS_LOGIN) {
      next("/"); // 已登录，跳主页
    } else {
      next(); // 继续进入登录页
    }
  } else {
    if (store.getters.IS_LOGIN) {
      store.dispatch("GET_INFO");
      next(); // 已登录，放行
    } else {
      next("/login"); // 未登录，跳登录页
    }
  }
});

// 讲路由实例导出
export default router;
